<template>
  <div>
    <el-breadcrumb separator-icon="ArrowRight" style="margin: 16px">
      <el-breadcrumb-item :to="{ path: '/ManageHome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>内容管理</el-breadcrumb-item>
      <el-breadcrumb-item>景点信息</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card style="margin: 15px; min-height: calc(100vh - 111px)">
      <div>

        <!--    功能区-->
        <div style="margin: 10px 0">
          <!--    搜索区  -->
          <div style="margin: 10px 0">
            <span style="margin-left: 40px; margin-right: 14px; font-size: 15px; font-weight: 700;">景区名称</span>
            <el-input v-model="search"  size="small" clearable placeholder="请输入景点名称" prefix-icon="el-icon-search" style="width: 15%;" />
            <span style="margin-left: 40px; margin-right: 14px; font-size: 15px; font-weight: 700;">状态</span>
            <el-select v-model="value" size="small" placeholder="请选择" clearable style="width:90px;margin-right: 20px;">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>

  </el-select>
            <el-button icon="el-icon-search" @click="load"
              style="background-color: #143371; color: aliceblue;" size="small">搜索</el-button>
            <el-button icon="el-icon-refresh-left" style="margin-left: 5px;"
              @click="reset" size="small">重置</el-button>
              
              <el-button style="background-color: #143371; color: aliceblue;" size="small"
                  @click="dataTicket">数据可视化</el-button>

            <div style="float: right">

              <el-tooltip content="添加景点信息" placement="top">

                <el-button style="background-color: #143371; color: aliceblue;" size="small"
                  @click="add">+新增</el-button>
              </el-tooltip>
            </div>
          </div>
        </div>

        <!--    表格-->
        <el-table v-loading="loading" :data="tableData" max-height="1000" style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="景点名称">
                  <span>{{ props.row.scName }}</span>
                </el-form-item>
                <el-form-item label="景点概要">
                  <p>{{ props.row.scDesc }}</p>
                </el-form-item>
                <el-form-item label="景点封面">
                  <img :src="props.row.scImage" alt="" style="width: 180px; height: 150px;">
                </el-form-item>
                <el-form-item label="更多图片">
                  <div style="display: flex;">
                    <img :src="item" alt="" v-for="(item, index) in props.row.scImages"
                      :key="index" style="width: 180px; height: 150px;">
                  </div>
                </el-form-item>
                <el-form-item label="景点介绍">
                  <div v-html="props.row.scDatail"></div>
                </el-form-item>



              </el-form>
            </template>
          </el-table-column>


          <el-table-column label="#" type="index" />
          <el-table-column label="景点编号" prop="scId"/>
          <el-table-column label="名称" prop="scName" width="180px" />
          <el-table-column label="概要" prop="scDesc" width="180px">
          </el-table-column>
          <el-table-column label="地址" prop="scAddress" width="150px" />
          <el-table-column label="开放时间" prop="scTime" />
          <el-table-column label="服务电话" prop="scPhone" width="120px" />
          <el-table-column label="起价" width="76px" sortable>
            <template slot-scope="scope">
              <span v-if="scope.row.scPrice != 0 "> {{scope.row.scPrice}}</span>
              <span v-else>免费</span>
            </template>
          </el-table-column>
          <el-table-column label="开放状态">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.scStatus" active-color="#13ce66" inactive-color="#ff4949">
              </el-switch>
            </template>
          </el-table-column>



          <!--      操作栏-->
          <el-table-column label="操作" width="150px">
            <template slot-scope="scope">
              <i @click="handleEdit(scope.$index, scope.row)" class="el-icon-edit" style="margin-right: 5px;"></i>
              <i  @click="handleDelete(scope.$index, scope.row)" class="el-icon-delete"  style="margin-right: 5px;"></i>
              <i @click="dataViewSpot(scope.$index,scope.row.scId)" class="el-icon-view"></i>


            </template>
          </el-table-column>
        </el-table>

        <!--分页-->
        <div style="margin: 10px 0">
          <el-pagination :currentPage="currentPage" :page-size="pageSize" :page-sizes="[10, 20]" :total="total"
            layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
          </el-pagination>
        </div>
        
          <el-dialog :visible.sync="DataVis" title="数据可视化" width="60%" top="60px">
              <spotTicketNum :color="color"></spotTicketNum>
          </el-dialog>

          
          <el-dialog :visible.sync="DataOneSpotVis" title="数据可视化" @close="cancel3" width="60%" top="60px" >
            <div style="height: 100px; width: 100%;">
              <el-select v-model="Datavalue" placeholder="请选择" @change="Datachange">
              <el-option
                v-for="item in Dataoptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
               >
              </el-option>
            </el-select>
            </div>


            <div style="height: 500px; width:100% ;">
              <R7dayGoodMoneyVue :dataList="R7data" :title="Sopttitle" :axdata="axdata"></R7dayGoodMoneyVue>
            </div>
            
           
          </el-dialog>
        
        <div v-loading="dialogloading">

          <!--      弹窗-->
          <el-dialog :visible.sync="dialogVisible" title="操作" width="50%" @close="cancel" top="30px">
            <el-form ref="form" :model="form" :rules="rules" label-width="120px">
              <el-form-item label="编号" prop="scId">
                <el-input v-model.number="form.scId" style="width: 80%" placeholder="景点的编号"></el-input>
              </el-form-item>
              <el-form-item label="名称" prop="scName">
                <el-input v-model="form.scName" style="width: 80%" placeholder="景点的名字"></el-input>
              </el-form-item>

              <el-form-item label="概述" prop="scDesc">
                <el-input v-model="form.scDesc" style="width: 80%" placeholder="用一句话描述它"></el-input>
              </el-form-item>

              <el-form-item label="地址" prop="scAdress">
                <el-input v-model="form.scAddress" style="width: 80%" placeholder="在此输入地址"></el-input>
              </el-form-item>

              <el-form-item label="服务电话" prop="scPhone">
                <el-input v-model.number="form.scPhone" style="width: 80%" placeholder="在此填写服务电话/咨询电话"></el-input>
              </el-form-item>

              <el-form-item label="开放时间" prop="scTime">
                <el-input v-model="form.scTime" style="width: 80%" placeholder="格式为 HH:MM - HH:MM"></el-input>
              </el-form-item>

              <el-form-item label="起价" prop="scPrice">
                <el-input v-model.number="form.scPrice" style="width: 80%" placeholder="免费请填0,否则填起价（最低价）"></el-input>
              </el-form-item>
              <!-- <el-table-column v-if = "false" label="开放状态">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.scStatus" active-color="#13ce66" inactive-color="#ff4949">
              </el-switch>
            </template>
          </el-table-column> -->
              <el-form-item label="封面图" prop="scImage">
                <el-upload action="" list-type="picture-card" :limit="1"
                  :on-preview="handlePictureCoverPreview" :on-remove="handleCoverRemove" accept=".jpg,.png"
                  :on-exceed="handleExceed"
                  :file-list="cover_list"
                  :http-request="UploadCover"
                  >
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="CoverdialogVisible">
                  <img width="100%" :src="CoverdialogImageUrl" alt="">
                </el-dialog>
             
              </el-form-item>
              <el-form-item label="景点图片(最多9张)" prop="scImages">
                <el-upload action="" list-type="picture-card" :limit="9"
                  :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
                  accept=".jpg,.png"
                  :on-exceed="handleNineExceed"
                  :auto-upload="true"
                  :file-list="more_list"
                  :http-request="UploadMore"
                  multiple
                  >
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="MoredialogVisible">
                  <img width="100%" :src="MoredialogImageUrl" alt="">
                </el-dialog>
             
              </el-form-item>
              <el-form-item label="景点详细介绍" prop="scDetail">
                <!-- stc -->
                <div style="border: 1px solid #ccc;">
        <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editor"
            :defaultConfig="toolbarConfig"
            :mode="mode"
        />
        <Editor
            style="height: 500px; overflow-y: hidden;"
            v-model="form.scDatail"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="onCreated"
        />
    </div>
              </el-form-item>

            </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
              </span>
            </template>
          </el-dialog>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
import request from '@/utils/request'
import { Upload } from 'element-ui';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import R7dayGoodMoneyVue from '@/components/R7dayGoodMoney.vue';
import '@wangeditor/editor/dist/css/style.css'
import SpotTicketNum from '@/components/spotTicketNum.vue';
export default {
  name: "SceneryInfo",
  components: { Editor, Toolbar,SpotTicketNum ,R7dayGoodMoneyVue},
  data() {
    // 手机号验证
    const checkPhone = (rule, value, callback) => {
      const phoneReg = /^1[3|4|5|6|7|8][0-9]{9}$/;
      if (!value) {
        return callback(new Error("电话号码不能为空"));
      }
      setTimeout(() => {
        if (!Number.isInteger(+value)) {
          callback(new Error("请输入数字值"));
        } else {
          if (phoneReg.test(value)) {
            callback();
          } else {
            callback(new Error("电话号码格式不正确"));
          }
        }
      }, 100);
    };

    //开放时间校验
    const checkScTime = (rule,value,callback) =>{
      const s = value.split("-")
     
      const p =/^(([0-2][0-3])|([0-1][0-9])):[0-5][0-9]$/
      if(s.length!=2){
        return callback(new Error("时间格式不正确"));
      }
      if(!p.test(s[0])||!p.test(s[1])){
        console.log("检验醋味")
        return callback(new Error("时间格式不正确"));
      }
     
      const st = s[0].split(":")
      const ed = s[1].split(":")
      var stt = st[0]+st[1];
      var edd = ed[0]+ed[1];
     
      if(parseInt(stt)>=parseInt(edd)){
        return callback(new Error("时间格式不正确"));
      }
      callback()
    };

    return {
      options:[
      {
        value:1,
        label:'开放'
      },
      {
        value:0,
        label:'停用'
      }
      ],
      DataOneSpotVis:false,
      DataVis:false,
      Dataoptions:[{
        value:0,
        label:'近7天'
      },
      {
        value:1,
        label:'近14天'
      },
      {
        value:2,
        label:'近30天'
      },
    ],
      axdata:['1','2','3','4','5','6','7'],
      allaxdata:[
      ['1','2','3','4','5','6','7'],
      ['1','2','3','4','5','6','7','8','9','10','11','12','13','14'],
      ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30']
    
    ],
      Datavalue:0,
      R7data: [20000,32400,23400,34200,54200,47800,56743],
      R7Alldata: [[20000,32400,23400,34200,54200,47800,56743],
      [10000,32400,23400,34200,54200,47800,56743,20000,32400,23400,34200,54200,47800,56743],
      [10000,32400,23400,34200,54200,47800,56743,20000,32400,23400,34200,54200,47800,56743,
      13000,22400,43400,44200,34200,47800,36743,25000,32460,25400,33200,64200,47800,46743,45543,65543],
      ],
      R7dataList:[
        [10000,32400,23400,34200,54200,47800,56743],
        [10440,32400,23400,31200,54200,47800,46743],
        [20000,52400,27400,24200,54200,41800,46743],
        [30000,32400,23400,33200,54200,47800,36743],
        [40000,52400,23800,34200,54200,47800,56743],
        [0,0,0,0,0,0,0],
        [22000,32223,24332,43223,43543,54323,54343]
      ],
      Sopttitle:"销售额",
      showId:null,
      color:'#000000',
      dialogloading:false,
      cover_list:[],
      more_list:[],
      value:null,
      loading: true,
      editJudge: true,
      judge: false,
      dialogVisible: false,
      search: "",
      currentPage: 1,
      pageSize: 10,
      total: 0,
      CoverdialogImageUrldialogImageUrl:'',
      CoverdialogVisible:false,
      MoredialogImageUrl:'',
      MoredialogVisible:false,
      editor:null,
      toolbarConfig: { },
      editorConfig: { placeholder: '请输入内容...' },
      mode: 'default', 
      tableData: [
        {
          scId: 1,
          scName: '张家界森林公园',
          scDesc: '自在悠然的美景',
          scAddress: '永定区',
          scPhone: '13456567786',
          scDatail: '<h4>111111111<h4>',
          scPrice: 100,
          scImages: ['lhs3.jpg', 'ls1.jpg', 'sqs6.jpg'],
          scImage: 'lhs4.jpg',
          scStatus: true,
          scTime:"8:00-17:00"
        }
      ],
      form: {
        scId:1,
        scName: '张家界森林公园',
        scDesc: '自在悠然的美景',
        scAddress: '永定区',
        scPhone: '13456567786',
        scDatail: '<h4>111111111<h4>',
        scPrice: 100,
        scImages: ['lhs3.jpg', 'ls1.jpg', 'sqs6.jpg'],
        scImage: 'lhs4.jpg',
        scTime:"8:00-17:00",
        scStatus:true
        
      },
      rules: {
        scId: [
          { required: true, message: "请输入编号", trigger: "blur" },
          { type: "number", message: "编号必须为数字", trigger: "blur" },
        ],
        scName: [
          { required: true, message: "请输入姓名", trigger: "blur" },
        ],
        scDesc: [
          { required: true, message: "请输入概要", trigger: "blur" },
        ],
        scDatail: [{ required: true, message: "请输入景点介绍", trigger: "change" }],
        scPhone: [{ required: true, validator: checkPhone, trigger: "blur" ,message:'请输入正确的电话格式'}],
        scPrice: [
          { required: true, message: "请输入起价", trigger: "blur" },
          { type: "number", message: "价格必须为数字", trigger: "blur" },
        ],
        scTime: [
         
          { required: true, validator: checkScTime, trigger: "blur" ,message:'请输入正确的时间格式'}
        ],
      },
      editDisplay: {
        display: "block",
      },
      display: {
        display: "none",
      },
    };
  },
  created() {
    this.load();
    this.loading = true;
    setTimeout(() => {
      //设置延迟执行
      this.loading = false;
    }, 1000);
  },
  methods: {
    Datachange(){
      console.log(1111)
      this.R7data = this.R7Alldata[this.Datavalue]
      
      this.axdata = this.allaxdata[this.Datavalue]
      console.log(this.axdata)
    },
    dataViewSpot(index,scId){
      this.DataOneSpotVis = true
      //向后端请求数据
      this.R7data = this.R7dataList[index]
    },
    dataTicket(){
      this.DataVis = true
      console.log("打开弹窗")
    },
    onCreated(editor) {
            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
        },
    UploadCover(data){
      var formData = new FormData()
      formData.append('type','view')
      formData.append('file',data.file)
      this.dialogloading = true;
      console.log("图片文件",data)
      console.log("现在的图片",this.cover_list)
      request.post("/scenery/upload",formData).then(res=>{
        if(res.code==='1'){
          this.cover_list = []
          this.cover_list.push({name:data.file.name,url:res.data})
          this.dialogloading = false;
        }else{
          this.dialogloading = false
          this.$message({
            type:'error',
            message:'上传失败'
          })
        }
      
      })

      
      
    },
    UploadMore(data){
      var formData = new FormData()
      formData.append('type','view')
      formData.append('file',data.file)
      this.dialogloading = true;
      console.log("上传详细图片",data)
      console.log("现在的图片",this.more_list)
      request.post("/scenery/upload",formData).then(res=>{
        if(res.code==='1'){
         // this.cover_list = []


          this.more_list.push({name:data.file.name,url:res.data})
          this.dialogloading = false;
        }else{
          this.dialogloading = false
          this.$message({
            type:'error',
            message:'上传失败'
          })
        }
      
      })
    },
    handleRemove(file, fileList) {
      console.log("删除",file, fileList);
      this.more_list = this.more_list.filter(item=>{
        return item.name!=file.name
      })
    },
    handleCoverRemove(file,fileList){
      console.log("删除",file, fileList);
      this.cover_list = []
    },
    handlePictureCoverPreview(file){
      this.CoverdialogImageUrldialogImageUrl = file.url;
      this.CoverdialogVisible = true;
    },
    handlePictureCardPreview(file) {
      this.MoredialogImageUrl = file.url
      this.MoredialogVisible = true
    },

    handleExceed(){
      this.$message.warning(`只允许上传一张图片`);
    },
    handleNineExceed(){
      this.$message.warning(`只允许上传9张图片`);
    },
    async load() {
      
      await request.get("/scenery/adminlist", {
            params: {
                pageNum: this.currentPage,
                pageSize: this.pageSize,
                search: this.search,
                value:this.value
            },
        }).then((res) => {
            console.log(res);
            this.tableData = res.data.list;
            this.total = res.data.total;
            this.loading = false;
        });
    },
    cancel3(){
      this.Datavalue = 0
      this.R7data = this.R7Alldata[this.Datavalue]
      
      this.axdata = this.allaxdata[this.Datavalue]
    },
    reset() {
      this.search = ''
      this.value = null,
      this.currentPage = 1;
      this.pageSize = 10
      this.load()
    },

    handleDelete(index, row) {

      // 确认框确认是否要删除
      this.$confirm("确定要删除" + row.scName + "的信息吗?", "删除提示", {
        iconClass: "el-icon-question", //自定义图标样式
        confirmButtonText: "残忍删除", //确认按钮文字
        cancelButtonText: "取消删除", //取消按钮文字
        showClose: true, //是否显示右上角关闭按钮
        type: "warning", //提示类型  success/info/warning/error
      }).then(() => {  //选择确认按钮进入此方法
        request.delete("/scenery/delete/" + row.scId).then(res => {
          console.log(row.scId)
          if (res.code === "1") {
          this.tableData[index].scStatus = 0
            this.$message({
              type: 'success',
              message: '删除成功'
            })
            this.load()
          }
          else {
            this.$message({
              type: 'error',
              message: res.msg
            })
          }
        })
      }).catch(() => { //选择取消按钮进入此方法
        //取消操作
       
      });
    },
    handleEdit(index, row) {
      this.judge = true;
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs.form.resetFields();
        this.form = JSON.parse(JSON.stringify(row));
        this.cover_list.push({name:"view",url:this.form.scImage})
        this.form.scId = parseInt(this.form.scId)
        for(var i =0;i<this.form.scImages.length;i++){
          this.more_list.push({name:'view'+i,url:this.form.scImages[i]})
        }
        this.editDisplay = { display: "block" };
      });
    },
    cancel() {
      this.$refs.form.resetFields()
      this.dialogVisible = false
      this.DataVis = false
      this.cover_list=[]
      this.more_list=[]
      this.DataOneSpotVis = false
    },
    save() {
      this.$refs.form.validate(vaild => {
        if (vaild) {
          if (this.judge) {
            this.form.scImage = this.cover_list[0].url
            this.form.scImages = []
           
            for(var i=0;i<this.more_list.length;i++){
              
              this.form.scImages.push(this.more_list[i].url)
             
            }

            //先表单验证，再放put请求
            request.put("/scenery/update", this.form).then(res => {
              if (res.code === "1") {
                this.$message({
                  type: 'success',
                  message: '修改成功'
                })
                this.search = "",
                this.value = null,
                this.load();
                this.dialogVisible = false
              }
              else {
                this.$message({
                  type: 'error',
                  message: res.msg
                })
              }
            })


          }
          else {

            //发post请求
            
            this.form.scImage = this.cover_list[0].url
            this.form.scImages = []
           
            for(var i=0;i<this.more_list.length;i++){
              
              this.form.scImages.push(this.more_list[i].url)
             
            }


            request.post("/scenery/add", this.form).then(res => {
              if (res.code === "1") {
                this.$message({
                  type: 'success',
                  message: '添加成功'
                })
                this.search = "",
                this.value = null,
                this.load();
                this.dialogVisible = false
              }
              else {
                this.$message({
                  type: 'error',
                  message: res.msg
                })
              }
            })
          }
        }
      })


    },
    add() {
      this.dialogVisible = true;
      this.judge = false;
      this.form = {}
    },
    handleSizeChange(pageSize) {
      //改变每页个数
      this.pageSize = pageSize;
      this.load();
    },
    handleCurrentChange(pageNum) {

      //改变页码
      this.currentPage = pageNum;
      this.load();
    },
    beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy()   // 组件销毁时，及时销毁编辑器
    }

  }


}
</script>
<style>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 80%;
  display: block;
}
.el-upload-list__item {
  transition: none !important;
}


</style>